<template>
	<div>
		<el-container style="height: 100vh;">
			<el-main>
				<div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2); border-radius: 5px 5px 5px 5px;">
					<el-row style="background-color: #FFFFFF;height: 10px;border-radius: 5px 5px 0 0;"></el-row>
					<el-row class="title">
						<el-col class="lv" :span="3">
							<i class="el-icon-location-information"></i>挂号预约/&nbsp;收费管理&nbsp;/
						</el-col>
						<el-col :span="2" style="color: #303133;font-size: 13px;text-align: left;">
							收费审查
						</el-col>
					</el-row>
					<el-row class="title" style="border-radius: 0 0 5px 5px ;">
						<el-col class="tcon" :span="3">
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;收费审查
						</el-col>
					</el-row>
					<el-row style="height: 15px;border-radius:0 0 5px 5px ;"></el-row>
				</div>
				<el-row style="background-color: Transparent;height:20px"></el-row>
				<div
					style="border-radius: 30px 30px 30px 30px;background-color: #FFFFFF;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);height: 570px;">
					<el-row style="height: 25px;border-radius: 5px 5px 0 0;"></el-row>
					<el-row style="height: 65px;">
						<el-col :span="23" style="font-family: '微软雅黑';font-size: 17px;text-align: center;">
							统计时间从：
							<el-date-picker value-format="yyyyMMdd HH:mm" v-model="value2" type="datetimerange" :picker-options="pickerOptions"
								range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
							</el-date-picker>
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<el-button size="medium" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
						</el-col>
					</el-row>
					<el-row style="height: 15px;"></el-row>
					<el-row>
						<el-col :span="5" style="text-align: right;font-family:'宋体';font-size: 18px;">
							门诊收费日结单：
						</el-col>
					</el-row>
					<el-row style="height: 5px;"></el-row>
					<el-row style="text-align: center;">
						<el-col :span="24">
							<el-tabs  tab-position="left" style="height: 400px;width: 85%;border: solid 2px #0096C7;" >
								<el-tab-pane v-for = "(item,index) in sfsc_item" :label="item.date_zb"  :key="index" >
									<div style="height: 25px;"></div>
									<table border="3" bordercolor="#F56C6C" bgcolor="#F2F6FC" cellspacing="0"
										style="width: 99%;height: 350px;">
										<tr>
											<td colspan="4">日结时间范围</td>
											<td colspan="20">{{item.date_qs}}</td>
										</tr>
										<tr>
											<td colspan="4">制表人</td>
											<td colspan="3">{{item.zbname}}</td>
											<td colspan="4">收款人</td>
											<td colspan="3">{{item.skname}}</td>
											<td colspan="5">制表时间</td>
											<td colspan="5">{{item.date_zb}}</td>
										</tr>
										<tr>
											<td colspan="4">起止发票号</td>
											<td colspan="20">10001 —— 10502</td>
										</tr>
										<tr>
											<td colspan="4">作废发票号</td>
											<td colspan="20"><span v-for="zffp in item.zffps">{{zffp.zffp}}&nbsp;&nbsp;&nbsp;</span></td>
										</tr>
										<tr>
											<td colspan="4">重打发票号</td>
											<td colspan="20">10456</td>
										</tr>
										<tr>
											<td colspan="4">收费金额</td>
											<td colspan="3">挂号费</td>
											<td colspan="3">500.00</td>
											<td colspan="2">药费</td>
											<td colspan="4">1000.00</td>
											<td colspan="4">其他费用</td>
											<td colspan="4">30.00</td>
										</tr>
										<tr>
											<td colspan="4">共计</td>
											<td colspan="3">(大写)</td>
											<td colspan="9">壹仟伍佰叁拾</td>
											<td colspan="3">(小写)</td>
											<td colspan="3">1530.00</td>
										</tr>
									</table>
								</el-tab-pane>
							</el-tabs>
						</el-col>
					</el-row>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	import {
		getRequest
	} from '@/utils/api'
	export default {
		mounted: function() {
			let url = "/sfsc";
			let _this = this;
			getRequest(url).then(resp => {
				if (resp.status == 200) {
					//alert(resp.data);
					_this.sfsc = resp.data;
				} else {
					_this.$message({
						type: 'error',
						message: '数据加载失败!'
					});
				}
			}, resp => {
				_this.loading = false;
				if (resp.response.status == 403) {
					_this.$message({
						type: 'error',
						message: resp.response.data
					});
				} else {
					_this.$message({
						type: 'error',
						message: '数据加载失败!'
					});
				}
			}).catch(resp => {
				//压根没见到服务器
				_this.loading = false;
				_this.$message({
					type: 'error',
					message: '数据加载失败!'
				});
			});
		},
		methods:{
			onSubmit(){
				let sfscs=this.sfsc;
				this.sfsc_item=[];
				console.log(this.value2);
				let date_start=parseInt((this.value2[0].split(' '))[0]);
				let date_end=parseInt((this.value2[1].split(' '))[0]);	
				let count=0;
				sfscs.forEach(item=>{
					let date_split = item.date_zb.split('-');
					let date_make =date_split[0]+date_split[1]+date_split[2];
					let date_num=parseInt(date_make);
					if(date_num>=date_start&&date_num<=date_end){
						console.log(count);
						this.sfsc_item[count]=item;
						console.log(this.sfsc_item[0]);
						count++;
					}
				})
			}
		},
		data() {
			return {
				sfsc: [{date_zb:'',date_qs:'',zbname:'',skname:'',qzfps:[{qzfp:''}],zffps:[{zffp:''}],cdfps:[{cdfp:''}]}],
				sfsc_item:[],
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
				value2: '',
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
				}, {
					date: '2016-05-04',
					name: '王小虎',
				}, {
					date: '2016-05-01',
					name: '王小虎',
				}, {
					date: '2016-05-03',
					name: '王小虎',
				}]
			}
		}
	}
</script>

<style scoped="scoped">
	.title {
		height: 35px;
		background-color: #FFFFFF;
		font-family: "微软雅黑";
		font-weight: bold;
	}

	.lv {
		font-size: 13px;
		color: #909399;
		text-align: right;
	}

	.tcon {
		font-size: 25px;
		color: #303133;
		text-align: left;
	}

	.el-table {
		margin: auto;
	}

	.el-tabs {
		margin: auto;
	}

	.table {
		table-layout: fixed;
	}
</style>
